<template>
	<div class="home">
		<el-container>
		  <!-- 侧边栏 -->
		  <el-aside width="200px">
			    <!-- LOGO -->
				<div class="block">
			      <el-image :src="require('../assets/logo.png')">
			        <div slot="placeholder" class="image-slot">
			          加载中<span class="dot">...</span>
			        </div>
			      </el-image>
			    </div>
			 
			  <el-menu
			        class="el-menu-vertical-demo"
			        background-color="#545c64"
			        text-color="#fff"
			        active-text-color="#ffd04b"
					router>
			        <el-submenu index="1">
			          <template slot="title">
			            <span>文章管理</span>
			          </template>
			          <el-menu-item-group>
			            <el-menu-item index="/home/articlelist">文章列表</el-menu-item>
			            <el-menu-item index="/home/articlepost" @click="reSet">发布文章</el-menu-item>
			          </el-menu-item-group>
			        </el-submenu>
					<el-submenu index="2">
					  <template slot="title">
					    <span>项目管理</span>
					  </template>
					  <el-menu-item-group>
					    <el-menu-item index="/home/category">项目列表</el-menu-item>
					  </el-menu-item-group>
					</el-submenu>
			      </el-menu>
		  </el-aside>
		  <el-container>
		   <!-- 头部 -->
			<el-header>
				<el-image class="avatar" :src="userInfo.head_img | imgUrl" fit="cover"></el-image>
				<span class="nickname">{{userInfo.nickname}}</span>
				<el-button type="danger" round @click="dialogVisible = true">退出</el-button>
			</el-header>
		   <!-- 主体 -->
			<el-main>
				<router-view ref="articlePost"></router-view>
			</el-main>
		    <!-- 底部 -->
			<el-footer>Footer</el-footer>
		  </el-container>
		</el-container>
	
	
		<!-- dialog -->
		<el-dialog
		  title="确认要退出吗？"
		  :visible.sync="dialogVisible"
		  width="50%"
		  >
		  <span>期待与您再会</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="logOut">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	import { getID , removeID , removeToken } from '../utils/localData.js'
	import { userDeatilByIdApi } from '../apis/user.js'
	export default {
		data(){
			return {
				userInfo: [],
				dialogVisible: false
			}
		},
		
		methods: {
			logOut(){
				removeID();
				removeToken();
				this.$router.replace('/');
			},
			
			reSet(){
				this.$nextTick(() => {
					this.$refs.articlePost.reSet();
				})
			},
		},
		
		
		async created() {
			const id = getID();
			const res = await userDeatilByIdApi(id);
			this.userInfo = res.data.data;
			//console.log(this.userInfo);
		},
	}
</script>

<style lang="less" scoped>
	.el-container{
		height: 100vh;
	}
	
	
	.el-header{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.avatar{
			width: 45px;
			height: 45px;
			border-radius: 50%;
			background-color: #fff;
			
		}
		
		.nickname{
			padding: 0px 20px;
			font-weight: bold;
		}
		.el-button{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 60px;
			height: 30px;
		}
	}
	
	.el-header, .el-footer {
	    background-color: #B3C0D1;
	    color: #333;
	    text-align: center;
	  }
	  
	  .el-footer{
		  display: flex;
		  justify-content: center;
		  align-items: center;
	  }
	  
	  
	  .el-aside {
	    background-color: #545c64;
	    color: #333;
	    text-align: center;
		
		.block{
			padding: 5px 10px 0px 0px;
			background-color: #b3c0d1;
		}
		.el-menu{
			border: 0;
			width: 100%;
			text-align: left;
			.el-menu-item{
				text-align: center;
			}
		}
	  }
	  
	  .el-main {
	    background-color: #E9EEF3;
	    color: #333;
	  }
	  
	  body > .el-container {
	    margin-bottom: 40px;
	  }
	  

	
	/deep/.el-dialog{
		.el-dialog__header{
			text-align: center;
			font-weight: bold;
		}
		.el-dialog__body {
			text-align: center;
			font-size: 15px;
			
		}
	}
</style>
